<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>Add Files</title>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.STYLE1 {font-size: 12px;}
.STYLE4 {
	font-size: 12px;
	color: #1F4A65;
	font-weight: bold;
}

a:link {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;

}
a:visited {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;
}
a:hover {
	font-size: 12px;
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.STYLE7 {font-size: 12px;}

a.addfile {

}

input.addfile {
cursor:pointer !important;

}
</style>

<script type="text/javascript">

function MultiSelector(list_target, max)
{
    this.list_target = list_target;
    this.count = 0;
    this.id = 0;
    if (max)
    {
        this.max = max;
    } 
    else 
    {
        this.max = -1;
    };

    /**
     * Add a new file input element
     */
    this.addElement = function(element)
    {
        // Make sure it's a file input element
        if (element.tagName == 'INPUT' && element.type == 'file')
        {
            element.name = 'file_' + this.id++;
            element.multi_selector = this;
			
			element.onchange = function()
            {
                // New file input
                var new_element = document.createElement('input');
                new_element.type = 'file';
               //new_element.size = 1;
                new_element.className = "addfile";
                this.parentNode.insertBefore(new_element, this);
                this.multi_selector.addElement(new_element);
                this.multi_selector.addListRow(this);
                this.style.position = 'absolute';
                this.style.left = '-1000px';
            };

            if (this.max != -1 && this.count >= this.max)
            {
				//alert("您只能添加"+max+"个附件！");
                element.disabled = true;
            };
            this.count++;
            this.current_element = element;
        } 
        else 
        {
            alert('Error: not a file input element');
        };
    };

    /**
     * Add a new row to the list of files
     */
    this.addListRow = function(element)
    {
        var new_row = document.createElement('div');
		var new_row_button = document.createElement( 'input' );
		new_row_button.type = 'button';
		new_row_button.value = '删除';
		new_row.element = element;
		new_row_button.onclick= function()
        {
			this.parentNode.element.parentNode.removeChild( this.parentNode.element );
			this.parentNode.parentNode.removeChild( this.parentNode );
			this.parentNode.element.multi_selector.count--;
			this.parentNode.element.multi_selector.current_element.disabled = false;
			return false;

        };
        var value_s=element.value;
        //alert(element.name);
		value_s=value_s.substring((value_s.lastIndexOf("\\")+1),value_s.length)
        new_row.innerHTML =value_s  + " ";
        new_row.appendChild(new_row_button);
        this.list_target.appendChild(new_row);
    };
};
</script>
</head>
<%
	String field=request.getParameter("field");//接收表单元素
%>
<body>
<form enctype="multipart/form-data" method="post" action="upload.jsp?field=<%= field %>" name="form1" target="tt">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#FFFFFF" class="STYLE1">
	  <a href=# class="addfile">
		<input id="upload_file" class="addfile" type="file" name="file_1" size="1" title="点击选择附件">
		</a>
	</td>
    </tr>
    <tr>
      <td id="files_list" bgcolor="#FFFFFF" class="STYLE1">
	  </td>
    </tr>
  </table>
</form>
<script type="text/javascript" >
var multi_selector = new MultiSelector(document.getElementById('files_list'), 5);// 输出目标，最大个数
multi_selector.addElement(document.getElementById('upload_file'));
//parent.document.all("upload").style.height=document.body.scrollHeight; 
</script>
</body>
<iframe name="tt" height="0" width="0" style="display:block;"></iframe>
</html>